/*  header-comment
/*  file   : index
/*  author : hua
/*  date   : 2017-6-26 15:43:27
*/
import React, { Component } from "react";
import PropTypes from "prop-types";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { mid2Url } from "@ali/ding-mediaid";
import { List } from "@ali/ding-ui";

// componetn
import Avatar from "../../components/Avatar";

// actions
import { fetchEntrantList } from "../../actions/entrant/getList.js";

// less
import "./index.less";

const mapStateToProps = state => ({
  ENTRANT_LIST: state.ENTRANT_LIST
});
const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(
    {
      dispatch,
      fetchEntrantList
    },
    dispatch
  )
});

@connect(mapStateToProps, mapDispatchToProps)
export default class EntrantList extends Component {
  constructor(props) {
    super(props);
  }
  static propTypes = {
    ENTRANT_LIST: PropTypes.object.isRequired,
    actions: PropTypes.shape({
      dispatch: PropTypes.func.isRequired,
      fetchEntrantList: PropTypes.func.isRequired
    }).isRequired
  };
  componentWillMount() {
    const { actions: { fetchEntrantList } } = this.props;
    fetchEntrantList();
  }
  componentDidMount() {
    window.document.title = "待入职员工";
  }
  render() {
    const { ENTRANT_LIST: { list } } = this.props;
    return (
      <div className="entrant-list">
        <List renderHeader={() => "明日入职"}>
          {list &&
            list.map((item, index) =>
              <div
                className="am-list-item am-list-item-middle"
                key={"entrantlist" + index}
              >
                <Avatar
                  className="am-list-thumb-replace"
                  avatar={
                    item.avatar && mid2Url(item.avatar, { imageSize: "thumb" })
                  }
                  name={item.name || "员工"}
                  size=""
                  font=""
                />
                <div className="am-list-line">
                  <p className="am-list-content">
                    {item.name}
                  </p>
                </div>
              </div>
            )}
        </List>
      </div>
    );
  }
}
